<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML>
<html>
<head>
	<title>图书馆管理系统</title>
	<jsp:include page="../common/css.jsp"></jsp:include>
	<style>
		body {
			background-image: url("/books/static/images/01.jpg");
		}
	</style>
</head>
<body class="bootstrap-admin-with-small-navbar">
	<jsp:include page="../common/top.jsp"></jsp:include>

	<div class="container">
			<jsp:include page="../common/left.jsp"></jsp:include>
			
			<!-- content -->
			<div class="col-md-10">
				<div class="row">
					<div class="col-lg-12">
						<div class="panel panel-default bootstrap-admin-no-table-panel">
							<div class="panel-heading">
								<div class="text-muted bootstrap-admin-box-title">读者管理</div>
							</div>
							<div
								class="bootstrap-admin-no-table-panel-content bootstrap-admin-panel-content collapse in">
								<form class="form-horizontal" action="/books/selectServlet"
									method="post">
									<div class="col-lg-3 form-group">
										<button type="button" class="btn btn-primary" id="btn_add"
											data-toggle="modal" data-target="#addModal">添加用户</button>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>

				<div class="row">
				<h4 id="errorMessage"></h4>
					<div class="col-lg-12">
						<table id="data_list" class="table table-hover table-bordered"
							cellspacing="0" width="100%">
							<thead>
								<tr>
									<th>ID</th>
									<th>账号</th>
									<th>姓名</th>
									<th>手机号</th>
									<th>邮箱</th>
									<th>可借阅天数</th>
									<th>最大可借数</th>
									<th>操作</th>
								</tr>
							</thead>

							<tbody>
								<c:forEach items="${userList}" var="user" varStatus="status">
									<tr>
										<td>${user.id}</td>
										<td>${user.userName}</td>
										<td>${user.nickname}</td>
										<td>${user.phone}</td>
										<td>${user.email}</td>
										<td>${user.lendDayNum}</td>
										<td>${user.lendMaxNum}</td>
										<td><button type="button" class="btn btn-warning btn-xs"
										data-toggle="modal" data-target="#updateModal" id="btn_update"
										onclick="showInfo2('${user.id}','${user.userName}','${user.nickname}',
										'${user.phone}','${user.lendDayNum}','${user.lendMaxNum}')">修改</button>
									<button type="button" class="btn btn-danger btn-xs"
										onclick="deletebook(${user.id})">删除</button></td>
									</tr>
								</c:forEach>
							</tbody>
						</table>
						${pageResult}
					</div>
				</div>
			</div>
		</div>
	<script type="text/javascript">
	//数据回显
    function showInfo2(uid,account,name,phone,lend_num,max_num) {
        document.getElementById("updateUserName").value = account;
        document.getElementById("updatename").value = name;
        document.getElementById("updatephone").value = phone;
        document.getElementById("updateaid").value = uid;
        document.getElementById("updatelend_num").value = lend_num;
        document.getElementById("updatemax_num").value = max_num;
    }
    function deletebook(uid) {
    	con=confirm("是否删除?"); 
    	if(con==true){
    		location.href = "/books/userServlet/deleteUser?id="+uid;
    	}
    }
    </script>
	<!-- 修改模态框（Modal） -->
	<!-------------------------------------------------------------->
	
	<!-- 修改模态框（Modal） -->
	<form class="form-horizontal" method="post"
		action="/books/userServlet/updateUser" onsubmit="return checkUpdate()">
		<!--保证样式水平不混乱-->
		<div class="modal fade" id="updateModal" tabindex="-1" role="dialog"
			aria-labelledby="updateModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="updateModalLabel">修改读者信息</h4>
						<h5 id = "updateMessage"></h5>
					</div>
					<div class="modal-body">

						<!---------------------表单-------------------->
						
						<div class="form-group">
							<label for="firstname" class="col-sm-3 control-label">账号</label>
							<div class="col-sm-7">
								<input type="hidden" id="updateaid" name="id"> 
								<input
									type="text" class="form-control" id="updateUserName"
									name="userName" placeholder="" readonly="readonly"> <label
									class="control-label" for="updateISBN" style="display: none;"></label>
							</div>
						</div>
						<div class="form-group">
							<label for="firstname" class="col-sm-3 control-label">姓名</label>
							<div class="col-sm-7">
								<input type="text" class="form-control" id="updatename"
									name="nickname" placeholder="" readonly="readonly"> <label
									class="control-label" for="updateBookName"
									style="display: none;"></label>
							</div>
						</div>
						<div class="form-group">
							<label for="firstname" class="col-sm-3 control-label">手机号</label>
							<div class="col-sm-7">
								<input type="text" class="form-control" id="updatephone"
									name="phone" placeholder=""> <label
									class="control-label" for="updatePress" style="display: none;"></label>
							</div>
						</div>
						<div class="form-group">
							<label for="firstname" class="col-sm-3 control-label">可借阅天数</label>
							<div class="col-sm-7">
								<input type="text" class="form-control" id="updatelend_num"
									name="lendDayNum" placeholder=""> <label
									class="control-label" for="updatePress" style="display: none;"></label>
							</div>
						</div>
						<div class="form-group">
							<label for="firstname" class="col-sm-3 control-label">最大借阅数</label>
							<div class="col-sm-7">
								<input type="text" class="form-control" id="updatemax_num"
									name="lendMaxNum" placeholder=""> <label
									class="control-label" for="updatePress" style="display: none;"></label>
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default"
							data-dismiss="modal">关闭</button>
						<button type="submit" class="btn btn-primary">修改</button>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal -->
		</div>
	</form>

	<!-------------------------------------------------------------->

	<!--------------------------------------添加的模糊框------------------------>
	<form class="form-horizontal" method="post"
		action="/books/userServlet/add" onsubmit="return checkAdd()">
		<!--保证样式水平不混乱-->
		<!-- 模态框（Modal） -->
		<div class="modal fade" id="addModal" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel">添加新用户</h4>
						<h5 id = "message"></h5>
					</div>
					<div class="modal-body">

						<!---------------------表单-------------------->

						<div class="form-group">
							<label for="firstname" class="col-sm-3 control-label">账号</label>
							<div class="col-sm-7">
								<input type="text" class="form-control" name="userName"
									id="addUserName" required="required" placeholder="请输入账号">
								<label class="control-label" for="addISBN"
									style="display: none;"></label>
							</div>
						</div>

						<div class="form-group">
							<label for="firstname" class="col-sm-3 control-label">昵称</label>
							<div class="col-sm-7">
								<input type="text" class="form-control" name="nickname"
									id="addNickName" required="required" placeholder="请输入昵称">
								<label class="control-label" for="addBookName"
									style="display: none;"></label>
							</div>
						</div>


						<div class="form-group">
							<label for="firstname" class="col-sm-3 control-label">手机号</label>
							<div class="col-sm-7">
								<input type="text" class="form-control" name="phone"
									id="addPhone" required="required" placeholder="请输入手机号">
								<label class="control-label" for="addPress"
									style="display: none;"></label>								</div>
							</div>
						<div class="form-group">
							<label for="firstname" class="col-sm-3 control-label">密码</label>
							<div class="col-sm-7">
								<input type="password" class="form-control" name="password"
									id="addPress" required="required" placeholder="请输入密码">
								<label class="control-label" for="addPress"
									style="display: none;"></label>
							</div>
						</div>
						<div class="form-group">
							<label for="firstname" class="col-sm-3 control-label">邮箱</label>
							<div class="col-sm-7">
								<input type="text" class="form-control" name="email"
									id="addEmail" required="required" placeholder="请输入邮箱">
								<label class="control-label" for="addPress"
									style="display: none;"></label>
							</div>
						</div>
						<div class="form-group">
							<label for="firstname" class="col-sm-3 control-label">可借阅天数</label>
							<div class="col-sm-7">
								<input type="text" class="form-control" name="lendDayNum"
									id="updatelend_num" required="required" placeholder="请输入可借阅天数">
								<label class="control-label" for="addNum"
									style="display: none;"></label>
							</div>
						</div>
						<div class="form-group">
							<label for="firstname" class="col-sm-3 control-label">最大可借数</label>
							<div class="col-sm-7">
								<input type="text" class="form-control" name="lendMaxNum"
									id="updatemax_num" required="required" placeholder="请输入最大可借数">
								<label class="control-label" for="addPress"
									style="display: none;"></label>
							</div>
						</div>
						
						<div class="form-group">
							<label for="firstname" class="col-sm-3 control-label">用户角色</label>
							<div class="col-sm-7">
								<select class="form-control" id="addBookType" name="status">
										<option value="1">普通用户</option>
										<option value="2">管理员</option>
								</select> 
								<label class="control-label" for="addBookType"
									style="display: none;"></label>
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default"
							data-dismiss="modal">关闭</button>
						<button type="submit" class="btn btn-primary">添加</button>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal -->
		</div>
	</form>
	<!--------------------------------------添加的模糊框------------------------>

	<jsp:include page="../common/userInfo.jsp"></jsp:include>
	<jsp:include page="../common/js.jsp"></jsp:include>
</body>
<c:if test="${UserMes==1}">
<script>
$("#errorMessage").text("该用户正在借阅书籍，无法删除");
$("#errorMessage").css("text-align","center");
$("#errorMessage").css("color","red");
</script>
</c:if>
<script>
	var addResult = false;
	var updateResult = false;
	//给用户名文本框绑定失去焦点事件
	$("#addUserName").blur(function(){
		$.get("http://localhost:8080/books/userServlet/checkUser",
				{userName:$("#addUserName").val()},
				function(data){
					var obj = JSON.parse(data);
					console.log(obj);
					if(obj.code == 200){
						//设置消息
						$("#message").text(obj.message);
						$("#message").css({"text-align":"center","color":"green"});
						$("#addUserName").css("border-color","green");
						addResult = true;
					}else{
						$("#message").text(obj.message);
						$("#message").css({"text-align":"center","color":"red"});
						$("#addUserName").css("border-color","red");
						addResult = false;
					}
				})
	})
	//给邮箱文本框绑定失去焦点事件
	/* $("#addEmail").blur(function(){
		$.get("http://localhost:8080/books/userServlet/checkUser",
				{email:$("#addEmail").val()},
				function(data){
					var obj = JSON.parse(data);
					console.log(obj);
					if(obj.code == 200){
						//设置消息
						$("#message").text(obj.message);
						$("#message").css({"text-align":"center","color":"green"});
						$("#addEmail").css("border-color","green");
						addResult = true;
					}else{
						$("#message").text(obj.message);
						$("#message").css({"text-align":"center","color":"red"});
						$("#addEmail").css("border-color","red");
						addResult = false;
					}
				})
	}) */
	//给手机号文本框绑定失去焦点事件
	/* $("#addPhone").blur(function(){
		$.get("http://localhost:8080/books/userServlet/checkUser",
				{phone:$("#addPhone").val()},
				function(data){
					var obj = JSON.parse(data);
					console.log(obj);
					if(obj.code == 200){
						//设置消息
						$("#message").text(obj.message);
						$("#message").css({"text-align":"center","color":"green"});
						$("#addPhone").css("border-color","green");
						addResult = true;
					}else{
						$("#message").text(obj.message);
						$("#message").css({"text-align":"center","color":"red"});
						$("#addPhone").css("border-color","red");
						addResult = false;
						
					}
				})
	}) */
	//给修改表单的手机号增加表单验证
	/* $("#updatephone").blur(function(){
		$.get("http://localhost:8080/books/userServlet/checkUser",
				{phone:$("#updatephone").val()},
				function(data){
					var obj = JSON.parse(data);
					if(obj.code == 200){
						//设置消息
						$("#updateMessage").text(obj.message);
						$("#updateMessage").css({"text-align":"center","color":"green"});
						$("#updatephone").css("border-color","green");
						updateResult = true;
					}else{
						$("#updateMessage").text(obj.message);
						$("#updateMessage").css({"text-align":"center","color":"red"});
						$("#updatephone").css("border-color","red");
						updateResult = false;
					}
				})
	}) */
	//表单验证
	function checkAdd(){
		return addResult;
	}
	function checkUpdate(){
		return updateResult;
	}
</script>
</html>